<style lang="scss" scoped>
#cmain {
    .rare-list {
        height: auto;
        background: #ffffff;
        border-radius: 10px;
        padding: 20px;
        padding-bottom: 50px;
        box-shadow: 0 0 10px 0 #cfcfcf;
        .rare-list-header {
            padding:0 10px;
            .right {
                float: right;
                width: 59%;
            }
        }
        /*表格*/
        .rare-list-table {
            position: relative;
            margin-top: 20px;
            padding: 10px;
            min-height: 80px;
            _height: 80px;
            .disabled {
                color: #ccc;
            }
            .el-table {
                min-height: 450px;
            }
        }
        .fileClass {
            width: 22px;
            height: 26px;
            display: inline-block;
            position: relative;
            margin-right: 7px;
            margin-left: 7px;
            margin-top: 10px;
        }
        .posBg {
            position: absolute;
            right: -4px;
            bottom: -4px;
            display: inline-block;
            width: 13px;
            height: 13px;
        }
        .f {
            background: url("/static/icon/file.png") no-repeat left top;
        }
        .fFail {
            background: url("/static/icon/file.png") no-repeat -23px 0px;
        }
        .b {
            background: url("/static/icon/file.png") no-repeat 0px -26px;
        }
        .bFail {
            background: url("/static/icon/file.png") no-repeat -23px -26px;
        }
        .v {
            background: url("/static/icon/file.png") no-repeat 0px -52px;
        }
        .vFail {
            background: url("/static/icon/file.png") no-repeat -23px -52px;
        }
        .c {
            background: url("/static/icon/file.png") no-repeat 0px -78px;
        }
        .cFail {
            background: url("/static/icon/file.png") no-repeat -23px -78px;
        }
        .s {
            background: url("/static/icon/file.png") no-repeat 0px -104px;
        }
        .sFail {
            background: url("/static/icon/file.png") no-repeat -23px -104px;
        }
        .upFail {
            background: url("/static/icon/status.png") no-repeat -26px 0px;
        }
        .anySuccess {
            background: url("/static/icon/status.png") no-repeat 0px 0px;
        }
        .anyLaoding {
            background: url("/static/icon/status.png") no-repeat -39px 0px;
        }
        .anyFail {
            background: url("/static/icon/status.png") no-repeat -13px 0px;
        }
        /*分页*/
        .pageation {
            height: 32px;
            line-height: 32px;
            margin-top: 20px;
        }
    }
    .rare-count {
        margin-top: 30px;
        height: 400px;
        background: #ffffff;
        border-radius: 10px;
        box-shadow: 0 0 10px 0 #cfcfcf;
        .title {
            font-weight: 500;
            height: 53px;
            line-height: 53px;
            color: #2b3245;
            font-size: 16px;
            padding-left: 30px;
            border-bottom: 1px solid #dcdfe6;
        }
    }
}
</style>

<template>
    <div id="cmain">
        <!--表格区域-->
        <div class="rare-list">
            <!--头部创建按钮及搜索-->
            <div class="rare-list-header">
                <Dropdown @on-click="addData">
                    <Button type="primary">新建数据</Button>
                    <DropdownMenu slot="list">
                        <DropdownItem name='single'>单个数据</DropdownItem>
                        <DropdownItem name='all'>批量数据</DropdownItem>
                    </DropdownMenu>
                </Dropdown>
                <div style="float:right;width:446px;">
                    <Select v-model="searchColumn" style="width:140px;" placeholder="请选择查询字段" @on-change="getSearchColumn">
                        <Option v-for="item in searchColumnList" :value="item.value" :key="item.value" style="text-align:center;letter-spacing:1px;">{{ item.label }}</Option>
                    </Select>
                    <Input style="width:300px;" placeholder="请输入" class="right" v-model="keyword">
                    <Button slot="append" icon="ios-search" @click='search'></Button>
                    </Input>
                </div>

            </div>
            <!--表格显示-->
            <div class="rare-list-table">
                <el-table v-if="!isWarn" v-loading="loading" element-loading-text="数据加载中，请稍后" :data="rareList" ref="rarelist" border style="width:100%" @selection-change="handleSelectionChange">
                    <el-table-column label="病人编号">
                        <template slot-scope="scope">
                            <a href="javascript:;" @click="editPatient(scope.row)" style="line-height:45px;">{{scope.row.patientcode}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="样本编号">
                        <template slot-scope="scope">
                            <a href="javascript:;" @click="sampleClick(list)" v-if='scope.row.sampleModelList!=null && list!=null' v-for="list in scope.row.sampleModelList" :key="list.sampleid" style='display:block;height:45px;line-height:45px;'>{{list.samplecode}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column label="亲属关系">
                        <template slot-scope="scope">
                            <div v-if='scope.row.sampleModelList!=null && list!=null' v-for="list in scope.row.sampleModelList" :key="list.sampleid" style="height:45px;line-height:45px;">{{list.designator}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="文件状态" align="center">
                        <template slot-scope="scope">
                            <div v-if='scope.row.sampleModelList!=null && list!=null' v-for="list in scope.row.sampleModelList" :key="list.sampleid" style="height:45px;line-height:45px;">{{list.samplestatus | setStatus}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <Button @click="doSubmit(scope.row)" type="primary" v-if='!scope.row.issubmit'>提交</Button>
                            <Button  disabled v-else>提交</Button>
                        </template>
                    </el-table-column>
                    <div slot="empty"></div>
                </el-table>
                <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>
                <warn v-if="isWarn" @callback="getRareList"></warn>
            </div>
            <div v-if="!isWarn" class="pageation">
                <el-pagination style="float:left;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10, 20, 50]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
                <div style="font-size:13px;color:#606266;float:left;padding:1px 5px;"> 共 {{sampleCount}} 个样本</div>
            </div>
        </div>
        <div v-if="sampleFileShow" class='sampleFile'>
            <sample-file :message='fileState' @modalshowEvent='modalFileShow()'></sample-file>
        </div>
    </div>
</template>
<script>

//引入登录方法
import { congenica } from "api/index.js";
import { setCookie, getCookie, delCookie } from "@/common/js/cookie.js";
import sampleFile from "@/components/congenica/sampleFile.vue";
import warn from "@/components/warn.vue";
export default {
    name: "rare",
    data() {
        return {
            sampleFileShow: false, //样本文件信息展示
            isWarn: false,
            emptyShow: false,
            isShowBarWarn: false,
            isShowPieWarn: false,
            fileState: {},
            labelWidth: 60, //文件状态栏宽度
            keyword: "",
            keywords: "",
            searchColumn: "patientcode", //查询字段
            searchColumnList: [
                //查询字段集合
                {
                    label: "病人编号",
                    value: "patientcode"
                },
                {
                    label: "样本编号",
                    value: "samplecode"
                }
            ],
            rareList: [],
            sampleCount: 0, //样本总数
            total: 100, //数据总数
            currentPage: 1, //当前页数
            pageSize: 5, //每页多少条,
            loading: true, //表格loading
            barDatanone: true,
            pieDatanone: true,
            BarData: [],
            PieData: [
                // {value: 335, name: '阴性报告数' },
                // { value: 310, name: '阳性报告数' },
                // { value: 234, name: '未出报告数' },
            ]
        };
    },

    components: {
        sampleFile,
        warn
    },
    methods: {
        modalFileShow() {
            this.sampleFileShow = false;
        },
        //点击病人编号
        sampleClick(row) {
            this.sampleFileShow = true;
            this.fileState = row;
        },
        //新建数据
        addData(name) {
            if (name == "single") {
                this.$store.state.flag = "add";
                this.$store.state.patientid = "";
                this.$store.state.pageindex = 1;
                this.$router.push("/congenica/editPatient");
            }
        },
        //查看病人
        editPatient(row) {
            console.log(row);
            this.$store.state.patientid = row.patientid;
            this.$store.state.flag = "edit";
            this.$store.state.pageindex = this.currentPage;
            this.$router.push("/congenica/editPatient");
        },
        //新建数据
        getRareList() {
            let obj = {
                userId: getCookie("userid"),
                pageIndex: this.currentPage,
                pageSize: this.pageSize
            };
            this.loading = true;
            if (this.searchColumn != "" && this.searchColumn != "all") {
                if (this.searchColumn == "patientcode") {
                    obj.patientCode = this.keywords;
                    obj.sampleCode = "";
                } else if (this.searchColumn == "samplecode") {
                    obj.patientCode = "";
                    obj.sampleCode = this.keywords;
                }
            }
            congenica
                .getHome(obj)
                .then(data => {
                    if (data && data.returnCode == 200) {
                        console.log(data);
                        this.rareList = data.data.patientModelList;
                        this.sampleCount = data.data.sampleCount;
                        this.total = data.data.totalCount;
                        this.loading = false;
                    } else {
                        this.$Message.error(data.msg);
                        this.loading = false;
                    }
                    this.isWarn = false;
                    if (this.rareList == null || this.rareList.length == 0) {
                        this.emptyShow = true;
                    } else {
                        this.emptyShow = false;
                    }
                })
                .catch(error => {
                    this.isWarn = true;
                    this.loading = false;
                });
        },
        search() {
            this.pageIndex = 1;
            this.currentPage = 1;
            this.keywords = this.keyword;
            this.getRareList();
        },
        //获取查询字段
        getSearchColumn(val) {
            this.keyword = "";
            this.keywords = "";
            this.searchColumn = val;
        },
        handleSizeChange(size) {
            this.pageSize = size;
            this.$store.state.pageSize = size;
            this.getRareList();
        },
        handleCurrentChange(page) {
            this.currentPage = page;
            this.getRareList();
        },
        //点击提交
        doSubmit(row){
            let obj = {
                userId: getCookie("userid"),
                patientid:row.patientid
            };
            this.loading = true;
            congenica.submit(obj).then(data => {
                if(data.returnCode == 0 || data.returnCode == 200){
                    this.$Message.success("提交"+data.msg);
                    row.issubmit = true;
                }else{
                    this.$Message.error(data.msg);
                }
                this.loading = false;
            })
        }
    },
    filters:{
        //设置文件状态
        setStatus(status) {
            if (status == 0) {
                return "未上传"; //未上传
            } else if (status == 5) {
                return "上传完成"; //上传完成
            }
        },
    },
    created() {
        var _this = this;
        this.$store.state.productId = "5";
        this.pageSize = this.$store.state.pageSize;
        this.currentPage = this.$store.state.pageindex;
        this.getRareList();
    }
};
</script>